<template>
<div>
		<div class="detailcent">
			<div class="top">
				<p class="biao">单日多人门票</p>
				<div class="cai">
					<van-sticky :offset-top="0">
						<van-tabs>
							<van-tab title="双人票"></van-tab>
							<div class="qing">
								<van-tab title="三人票">
								</van-tab>
							</div>
							<van-tab title="团队"></van-tab>
							<van-tab title=""></van-tab>
						</van-tabs>
					</van-sticky>
				</div>
			</div>
		
			<div class="bottom">
				<div class="cheng" v-for="(item, index) in arr" :key="index">
					<p class="piao">{{ item.text }}</p>
					<p class="sui">{{ item.text1 }}</p>
					<div class="tiao">
						<span>{{ item.text2 }}</span>
						<span> {{ item.text3 }}</span>
						<span>{{ item.text4 }}</span>
					</div>
					<div class="guan">
						<img :src="item.img" alt="">
						<span>{{ item.text5 }}</span>
						<span>{{ item.text6 }}</span>
					</div>
					<div class="yue">
						<span>{{ item.text7 }}</span>
						<span>{{ item.text8 }}&nbsp;></span>
						<span>{{ item.text9 }}</span>
						<span>{{ item.text10 }}</span>
					</div>
					<div class="ding">
						<span>¥</span>
						<span>{{ item.text11 }}</span>
						<span>起</span>
						<span>订</span>
						<span @click="topage">{{ item.text12 }}</span>
		
					</div>
				</div>
		
			</div>
		</div>
			<div class="detailcents">
				<div class="top">
					<p class="biao">园内项目</p>
				</div>
			
				<div class="bottom">
					<div class="cheng" v-for="(item,index) in arrs" :key="index">
						<p class="piao">{{ item.text }}</p>
						<p class="sui">{{ item.text1}}</p>
						<div class="tiao">
							<span>{{ item.text2 }}</span>
							<span> {{ item.text3 }}</span>
							<span>{{ item.text4 }}</span>
						</div>
						<div class="guan">
							<img :src="item.img" alt="">
							<span>{{ item.text5 }}</span>
							<span>{{ item.text6 }}</span>
						</div>
						<div class="yue">
							<span>{{ item.text7 }}</span>
							<span>{{ item.text8 }}&nbsp;></span>
							<span>{{ item.text9 }}</span>
							<span>{{ item.text10 }}</span>
						</div>
						<div class="ding">
							<span>¥</span>
							<span>{{ item.text11 }}</span>
							<span>起</span>
							<span>订</span>
							<span @click="topage1">{{ item.text12 }}</span>
			
						</div>
					</div>
			
				</div>
			</div>
			<div class="last"></div>
</div>
</template>

<script>
export default {
	data() {
		return {
			arr: [
				{ img: "https://img.alicdn.com/tfs/TB1bN8qm0Tfau8jSZFwXXX1mVXa-184-56.png", text: "双人票", text2: "条件退", text3: "无须换票", text4: "平均1分钟出票", text5: "可订今日", text7: "月售5000+", text8: "预订须知",  text11: "765" }
			],
			arrs: [
				{ img: "https://img.alicdn.com/tfs/TB1bN8qm0Tfau8jSZFwXXX1mVXa-184-56.png", text: "环球大巡游预留观赏区入场权益", text3: "1日门票及1日门票（大学生票）...", text5: "可订今日", text7: "月售5000+", text8: "预订须知",  text11: "0" },
				{ img: "https://img.alicdn.com/tfs/TB1bN8qm0Tfau8jSZFwXXX1mVXa-184-56.png", text: "魔法袍+魔法棒一日租赁", text2: "条件退", text3: "兑换使用", text5: "可订今日", text7: "月售1", text8: "预订须知",  text11: "138" },
			],
		}
	},
	methods: {
		topage() {
			this.$router.push('/ding').catch(err => { })
		},
		topage1() {
			this.$router.push('/ding').catch(err => { })
		}
	}
	// methods: {
	// 	gofu() {
	// 		this.$router.push('/ding').catch(err => { })
	// 	},
	// 	gofu1() {
	// 		this.$router.push('/ding').catch(err => { })
	// 	}
	// }
}
</script>

<style scoped>
.detailcent{
	width: 7.02rem;
		height: 4.4rem;
		margin-left: .24rem;
		margin-top: .23rem;
		background-color: white;
		border-radius: .15rem;
		overflow: hidden;
}
.detailcents{
	width: 7.02rem;
		height: 7.1rem;
		margin-left: .24rem;
		margin-top: .23rem;
		background-color: white;
		border-radius: .15rem;
		overflow: hidden;
		margin-bottom: .2rem;
}
.cai {
	width: 7rem;
	margin-left: -0.4rem;
	margin-top: .2rem;
	line-height: 1rem;
	border-bottom: 1px solid transparent;
}

::v-deep .van-sticky {
	width: 6rem;
	margin-left: .18rem;
}

::v-deep .van-tab--active {
	height: .6rem;
	border: 1px solid rgba(202, 200, 200, 0.384);
	border-radius: .6rem;
	background: #ffe033;
	margin-left: .2rem;
}

::v-deep .van-tabs__line {
	display: none;
}

::v-deep .van-tab {
	margin-top: 5px;
	margin-bottom: 5px;
}

::v-deep .van-tabs__nav {
	margin-left: .21rem;
	/* 整个背景 最大的盒子*/
	/* background-color: #f0e0d932; */
}

.biao {
	margin-top: .3rem;
	margin-left: .2rem;
	font-size: 18px;
}
.bottom {
	width: 6.42rem;
	height: auto;
	background-color: #f7f8fa;
	margin-left: .22rem;
	overflow: hidden;
}

.cheng {
	height: 2.68rem;
	margin-left: .15rem;
}

.piao {
	margin-top: .3rem;
	font-size: 16px;
	margin-bottom: .15rem;
}

.sui {
	color: #5c5f66;
	margin-bottom: .05rem;
}

.tiao {
	margin-bottom: .12rem;
}

.tiao :nth-child(1) {
	color: green;
	margin-right: .1rem;
}

.tiao :nth-child(2) {
	color: rgb(92, 95, 102);
	margin-right: .1rem;
}

.tiao :nth-child(3) {
	color: rgb(92, 95, 102);
}

.guan {
	margin-bottom: .2rem;
}

.guan img {
	width: .75rem;
	height: .3rem;
	margin-right: 5px;
}

.guan :nth-child(2) {
	color: rgb(255, 115, 0);
	margin-right: .1rem;
	border-radius: .05rem;
	padding: 0 3px;
border: 1px solid rgb(255, 115, 0);
}

.guan :nth-child(3) {
	margin-right: .1rem;
	color: rgb(255, 64, 26);
	border-radius: .05rem;
	padding: 0 3px;
	/* border: 1px solid rgb(255, 64, 26); */
}

.yue :nth-child(1) {
	color: #919499;
	margin-right: .1rem;
}

.yue :nth-child(2) {
	color: #00a2ff;
	margin-right: .6rem;
}

.yue :nth-child(3) {
	color: red;
	background-image: linear-gradient(90deg, #fff2eb9a, #ff401aa4);
}

.yue :nth-child(4) {
	color: white;
	border-radius: 5px 0 0 0;
	background-image: linear-gradient(90deg, #ff846b, #ff401a);
}

.ding {
	position: relative;
	left: 4rem;
	bottom: 1rem;
}

.ding :nth-child(1) {
	color: #ff5000;
	font-size: 14px;
	margin-left: -.2rem;
}

.ding :nth-child(2) {
	color: #ff5000;
	font-size: 20px;
	margin-right: .05rem;
}

.ding :nth-child(3) {
	color: #919499;
	margin-right: 10px;
}

.ding :nth-child(4) {
	display: block;
	width: .84rem;
	height: .84rem;
	text-align: center;
	line-height: .84rem;
	font-weight: 700;
	background-color: #ff7300;
	color: white;
	font-size: 20px;
	margin-left: 1.3rem;
	margin-top: -.68rem;
	border-radius: .15rem;
}

.ding :nth-child(5) {
	color: #919499;
	position: relative;
	top: -.2rem;
	left: .6rem;
}
.last{
	height: .2rem;
}
</style>